<template>
  <div id="songList" v-show="isShowSongList">
    <img @click="closeSongList"
        style="width: 45px;position: absolute;right: 5%;top: 8px"
         :src="closeSrc" alt="">
    <p style="font-size: 20px;margin-left: 15px;font-weight: 600">{{singerName}} <span style="font-size: 16px">({{dataSource.length}})</span> </p>
    <ul class="songListUl">
      <li
          @click="selectSong(item)"
          class="songListLi"
          :class='{active:activeSongId==item.songId}'
          v-for="(item,index) of dataSource">
        {{item.name}}<span v-show="activeSongId==item.songId">  -------   当前播放</span>
      </li>
    </ul>
  </div>
</template>

<script>
import request from "../../../utils/request";

export default {
  name: "SongList",
  props: {
    singerId:{
      type:Number,
      default:1
    },
    activeSongId:{
      type:Number,
      default:1
    },
    singerName:{
      type:String,
      default:''
    },
    isShowSongList:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      dataSource:[],
      closeSrc:require('../../../assets/close.png'),
      activeIndex:1
    }
  },
  methods: {
    //获取歌手歌曲
    loadDataSource(value) {
      request.request({
        method: "get",
        url: '/api/song/getSong',
        params: {
          singerId: value
        }
      }).then(res => {
        if (res.data.code == "200") {
          this.dataSource=res.data.data
        }
      })
    },
  //  关闭歌曲列表
    closeSongList(){
      this.$bus.$emit('closeSongList',false)
    },
    //点击歌曲
    selectSong(item) {
      //跳转播放器页面传递歌曲id
      this.$bus.$emit('setPlayerSongId',item.songId)
      this.$bus.$emit('closeSongList',false)
    }
  },
  watch:{
    singerId:{
      immediate:true,
      deep:true,
      handler(value){
        this.loadDataSource(value)
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
#songList {
  width: 100%;
  height: 550px;
  margin-top: -280px;
  position: absolute;
  z-index: 999;
  border-radius: 10px 10px 0px 0px;
  box-shadow: 0px 0px 5px #b0afaf;
  background-color: white;
  overflow: scroll;
}
.songListLi {
  width: 100%;
  height: 45px;
  font-size: 18px;
  font-weight: 500;
  margin-left: 15px;
  line-height: 45px;
}
.active{
  color: red;
}
</style>